<template>
  <div class="foots">

    <van-tabbar v-model="active"   route :safe-area-inset-bottom="true">
      <!-- 首页 -->
  <van-tabbar-item replace to="/index">
    <span>首页</span>
    <template slot="icon" slot-scope="props">     
     <img      
      :src="active === 0 ? IndexIcon.active : IndexIcon.normal"
    >
    </template>
  </van-tabbar-item>
<!-- 分类 -->
   <van-tabbar-item replace to="/classify">
    <span>分类</span>
    <template slot="icon" slot-scope="props">     
     <img      
      :src="active === 1 ? ClassifyIcon.active : ClassifyIcon.normal"
    >
    </template>
  </van-tabbar-item>
  <!-- 发布 -->
   <van-tabbar-item replace to="/send">
    <span>发布</span>
    <template slot="icon" slot-scope="props">     
     <img      
      :src="active === 2 ? SendIcon.active : SendIcon.normal"
    >
    </template>
  </van-tabbar-item>
   <!-- 消息 -->
   <van-tabbar-item replace to="/systemList">
    <span>消息</span>
    <template slot="icon" slot-scope="props">     
     <img      
      :src="active === 3 ? MessageIcon.active : MessageIcon.normal"
    >
    </template>
  </van-tabbar-item>
<!-- 我的 -->
   <van-tabbar-item replace to="/userCenter">
    <span>我的</span>
     <template slot="icon" slot-scope="props">     
        <img      
      :src="active === 4 ? UserIcon.active : UserIcon.normal"
    >
     </template>
   
  </van-tabbar-item>  
</van-tabbar>
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
   name: "tabbar",
   props:{
     active:0

   },

  data() {
    return {
     
      currIndex: 0,
      IndexIcon:{
         normal: require("../../assets/images/footer-icon-index.png"),
          active: require("../../assets/images/footer-icon-index-active.png")
      },
       ClassifyIcon:{
         normal: require("../../assets/images/footer-icon-classify.png"),
          active: require("../../assets/images/footer-icon-classify-active.png")
      },
       SendIcon:{
         normal: require("../../assets/images/footer-icon-send.png"),
          active: require("../../assets/images/footer-icon-send-active.png")
      },
       MessageIcon:{
         normal: require("../../assets/images/footer-icon-message.png"),
          active: require("../../assets/images/footer-icon-message-active.png")
      },
        UserIcon:{
         normal: require("../../assets/images/footer-icon-user.png"),
          active: require("../../assets/images/footer-icon-user-active.png")
      },
      
    };
  },
  computed:{
    ...mapState(['roles'])

  },
  methods: {
    jump(index, val) {
      let _this = this;
     _this.currIndex = index;
      _this.$router.push(val);
      
      
    },
   
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
.foots {
  .van-tabbar{
    height: 1.2rem;
  }
  .van-tabbar-item{
    color: #B6B6B6;
    font-size: 14px;
    .van-tabbar-item__icon{
      img{
        height: 24px;
      }
    }
    
  }
  .van-tabbar-item--active{
    color: #5bbd97;
    

  }
}
</style>
